<template>
  <div class="dashboard-page">
    <!-- 第一行 -->
    <el-row :gutter="20">
      <el-col :span="18">
        <el-row :gutter="20">
          <el-col :span="13">
            <el-card style="height: 126px" class="card1">
              <div class="header">
                <div class="title">
                  工单统计
                  <span class="right-time">{{
                    `${subTitleStart}~${subTitleEnd}`
                  }}</span>
                </div>
              </div>
              <div class="body body1">
                <el-statistic
                  :value="reportInfo.total"
                  title="工单总数(个)"
                ></el-statistic>
                <el-statistic
                  :value="reportInfo.completedTotal"
                  title="完成工单(个)"
                ></el-statistic>
                <el-statistic
                  :value="reportInfo.progressTotal"
                  title="进行工单(个)"
                ></el-statistic>
                <el-statistic
                  :value="reportInfo.cancelTotal"
                  title="取消工单(个)"
                ></el-statistic>
              </div>
            </el-card>
          </el-col>
          <el-col :span="11">
            <el-card style="height: 126px" class="card2">
              <div class="header">
                <div class="title">
                  销售统计
                  <span class="right-time">{{
                    `${subTitleStart}~${subTitleEnd}`
                  }}</span>
                </div>
              </div>
              <div class="body body2">
                <el-statistic
                  :value="Number(order.count)"
                  title="订单量(个)"
                ></el-statistic>
                <el-statistic
                  :value="order.amount"
                  title="销售额(万元)"
                  :precision="2"
                ></el-statistic>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col>
            <el-card style="height: 312px">
              <div class="header">
                <div class="title">
                  销售统计
                  <span class="right-time">{{ echartTime }}</span>
                </div>
                <el-radio-group
                  v-model="radioValue"
                  class="week-month-year"
                  size="small"
                  @input="getAmountCollect"
                >
                  <el-radio-button label="周"></el-radio-button>
                  <el-radio-button label="月"></el-radio-button>
                  <el-radio-button label="年"></el-radio-button>
                </el-radio-group>
              </div>
              <!-- 第一步，定义一个固定宽高的容器 -->
              <!-- <div class="chart-box" ref="box" style="height: 500px"></div> -->
              <div class="echarts">
                <div class="echart" ref="echart1"></div>
                <div class="echart" ref="echart2"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card style="height: 498px" shadow="never">
          <div class="header">
            <div class="title">
              商品热榜
              <span class="right-time">{{
                `${subTitleStart}~${subTitleEnd}`
              }}</span>
            </div>
          </div>
          <div class="body goodshot" v-if='skuTop.length!==0'>
            <el-row v-for="(item, index) in skuTop" :key="index">
              <el-col :span="5">
                <div class="top" :class="'top' + (index + 1)">
                  {{ index + 1 }}
                </div>
              </el-col>
              <el-col :span="13">
                <div class="sku-name">{{ item.skuName }}</div>
              </el-col>
              <el-col :span="6">
                <div class="count">{{ item.count }}单</div>
              </el-col>
            </el-row>
          </div>
           <el-empty v-else description="暂无数据"></el-empty>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="14">
        <el-card style="height: 313px" shadow="never">
          <div class="header">
            <div class="title">合作商点位数Top5</div>
            <el-button
              icon="el-icon-more"
              circle
              size="mini"
              @click="$router.push('/partnermanagement')"
            ></el-button>
          </div>
          <div class="body" style="margin-top:20px">
            <el-row>
              <el-col :span="17">
                <div ref="echart3" style="width: 100%; height: 300px"></div>
              </el-col>
              <el-col :span="7">
                <div class="collect">
                  <div class="count">{{ nodeCount }}</div>
                  <div class="name">点位数</div>
                  <div class="count count2">{{ partnerCount }}</div>
                  <div class="name">合作商数</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card style="height: 313px" shadow="never">
          <div class="header">
            <div class="title">异常设备监控</div>
            <el-button
              icon="el-icon-more"
              circle
              size="mini"
              @click="$router.push('/error')"
            ></el-button>
          </div>

            <el-empty description="暂无数据"></el-empty>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入echarts里所有项，重命名
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import { getReportInfo, getOrderCount, getOrderAmount, getAmountCollect, getRegionCollect, getSkuTop, getNodeCollect, getNodeCount, getPartnerCount, getStatusTop10 } from '@/api/dashboard'
export default {
  name: 'DashBoard',
  data () {
    return {
      radioValue: '周',
      num: 1,
      start: '',
      end: '',
      reportInfo: {
        cancelTotal: 0,
        completedTotal: 0,
        progressTotal: 0,
        total: 0
      },
      // 改变对象里的属性不会响应式？？？？
      order: {
        count: 0,
        amount: 0
      },
      xyAmountCollect: {},
      xyRegionCollect: {},
      amountCollectX: [],
      amountCollectY: [],
      echartTime: '',
      weekFirstDay: '',
      skuTop: [],
      StatusTop10: [],
      nodeCollect: [],
      nodeCount: 0,
      partnerCount: 0,
      statustop10: []

    }
  },
  created () {
    this.getTime()
    this.getReportInfo()
    this.getOrderCount()
    this.getOrderAmount()
    this.getAmountCollect()
    this.getSkuTop()
    this.getNodeCollect()
    this.getNodeCount()
    this.getPartnerCount()
    this.getStatusTop10()
  },
  computed: {
    subTitleStart () {
      return this.start.split(' ')[0].replace(/-/g, '.')
    },
    subTitleEnd () {
      return this.end.split(' ')[0].replace(/-/g, '.')
    }

  },
  methods: {
    getTime () {
      this.start = `${dayjs(new Date()).format('YYYY-MM')}-01 00:00:00`
      this.end = `${dayjs(new Date()).format('YYYY-MM-DD')} 23:59:59`
    },
    async getReportInfo () {
      const res = await getReportInfo(this.start, this.end)
      // console.log(res)
      res.forEach(item => {
        this.reportInfo.total += item.total
        this.reportInfo.completedTotal += item.completedTotal
        this.reportInfo.progressTotal += item.progressTotal
        this.reportInfo.cancelTotal += item.cancelTotal
      })
    },
    async getOrderCount () {
      this.order.count = Number(await getOrderCount(this.start, this.end))
    },
    async getOrderAmount () {
      this.order.amount = Number(await getOrderAmount(this.start, this.end)) / 1000000
    },
    async getAmountCollect () {
      if (this.radioValue === '周') {
        this.weekFirstDay = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD')
        this.echartTime = `${dayjs().startOf('week').add(1, 'day').format('YYYY.MM.DD')}~${this.end.split(' ')[0].replace(/-/g, '.')}`
        this.xyAmountCollect = await getAmountCollect(1, this.weekFirstDay, this.end.split(' ')[0])
        this.amountCollectX = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'].slice(0, this.xyAmountCollect.xAxis.length)
        this.echarts1(this.xyAmountCollect, this.amountCollectX, this.$refs.echart1)

        this.getRegionCollect(this.weekFirstDay, this.end.split(' ')[0])
      }
      if (this.radioValue === '月') {
        this.echartTime = `${this.start.split(' ')[0].replace(/-/g, '.')}~${this.end.split(' ')[0].replace(/-/g, '.')}`
        this.xyAmountCollect = await getAmountCollect(1, this.start.split(' ')[0], this.end.split(' ')[0])
        this.amountCollectX = this.xyAmountCollect.xAxis.map(item => item.replace(/-/, '月').replace(/-/, '日'))
        this.echarts1(this.xyAmountCollect, this.amountCollectX, this.$refs.echart1)
        this.getRegionCollect(this.start.split(' ')[0], this.end.split(' ')[0])
      }
      if (this.radioValue === '年') {
        this.echartTime = `${this.start.split(' ')[0].split('-')[0]}.01.01~${this.end.split(' ')[0].replace(/-/g, '.')}`
        this.xyAmountCollect = await getAmountCollect(2, `${this.start.split(' ')[0].split('-')[0]}-01-01`, this.end.split(' ')[0])
        this.amountCollectX = this.xyAmountCollect.xAxis.map(item => item.replace(/-/, '月').replace(/-/, '日'))
        this.echarts1(this.xyAmountCollect, this.amountCollectX, this.$refs.echart1)
        this.getRegionCollect(`${this.start.split(' ')[0].split('-')[0]}-01-01`, this.end.split(' ')[0])
      }
    },
    async getRegionCollect (start, end) {
      this.xyRegionCollect = await getRegionCollect(start, end)
      // console.log(this.xyRegionCollect)
      this.echarts2(this.xyRegionCollect, this.$refs.echart2)
    },
    async getSkuTop () {
      this.skuTop = await getSkuTop(this.start.split(' ')[0], this.end.split(' ')[0])
    },
    async getNodeCollect () {
      this.nodeCollect = await getNodeCollect()
      this.echarts3(this.nodeCollect, this.$refs.echart3)
    },
    async getNodeCount () {
      this.nodeCount = await getNodeCount()
    },
    async getPartnerCount () {
      this.partnerCount = await getPartnerCount()
    },
    async getStatusTop10 () {
      this.statustop10 = await getStatusTop10()
    },
    // 封装echarts1
    echarts1 (data, x, dom) {
      const myEcharts = echarts.init(dom)
      // 第三步，设置配置项
      myEcharts.setOption({
        title: {
          text: '销售额趋势图',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '销售额: {c}<br/>{b}'
        },
        xAxis: {
          axisTick: {
            alignWithLabel: true

          },
          type: 'category',
          data: x

        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: data.series.map(item => item / 100),
            type: 'line',
            smooth: true,
            itemStyle: {
              color: 'rgba(244, 30, 30, 1)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#fdc4c4'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ]
              }
            }
          }
        ]
      })
    },
    // 封装echarts2
    echarts2 (data, dom) {
      const myEcharts = echarts.init(dom)
      // 第三步，设置配置项
      myEcharts.setOption({
        title: {
          text: '销售额分布',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        barWidth: '20',
        grid: {
          left: '30%'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '销售额: {c}<br/>{b}'
        },
        xAxis: {
          type: 'category',
          data: data.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: data.series.map(item => item / 100),
            type: 'bar'
          }
        ]
      })
    },
    // 封装echarts3
    echarts3 (data, dom) {
      const myEcharts = echarts.init(dom)
      // 第三步，设置配置项
      myEcharts.setOption({
        label: {
          trigger: 'item',
          formatter: '{b} \n {d}%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/>总占比 : {d}%'
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: ['40', '70%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            data: data
          }
        ]
      })
    }
  }

}
</script>
<style lang="scss" >
.dashboard-page {
  .el-card__body {
    padding: unset !important;
    .body1 {
      .el-statistic {
        .con {
          .number {
            color: #072074;
            height: 50px;
            font-size: 36px;
            font-weight: 600;
            line-height: 50px;
          }
        }
        .head {
          color: #91a7dc;
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-weight: 400;
          line-height: 17px;
        }
      }
    }
    .body2 {
      .el-statistic {
        .con {
          .number {
            color: #ff5757;
            height: 50px;
            font-size: 36px;
            font-weight: 600;
            line-height: 50px;
          }
        }
        .head {
          color: #de9690;
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-weight: 400;
          line-height: 17px;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.dashboard-page {
  .el-card {
    border-radius: 20px;
    padding: 20px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      .right-time {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #999;
      }
    }
    .el-button {
      padding: unset;
      width: 16px;
      height: 16px;
      color: #5f84ff;
      text-align: center;
      line-height: 16px;
    }
  }
  .body1,
  .body2 {
    display: flex;
    height: 107px;
    .el-statistic {
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
    }
  }
  .card1 {
    background: #e9f3ff;
    background-image: url("~@/assets/lkd/task1-1.png"),
      url("~@/assets/lkd/task1-2.png");
    background-repeat: no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
  }
  .card2 {
    background: #fbefe8 url("~@/assets/lkd/task2.png") no-repeat
      calc(100% - 12px) 100%;
  }
  .echarts {
    display: flex;
    .echart {
      width: 50%;
      height: 278px;
    }
  }
  .goodshot {
    height: 460px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20px;
    .top {
      width: 21px;
      height: 20px;
      font-size: 12px;
      text-align: center;
      background: url("~@/assets/lkd/top4.png");
      color: #e9b499;
    }
    .top.top1 {
      width: 21px;
      height: 20px;
      text-align: center;
      background: url("~@/assets/lkd/top1.png");
      color: #8e5900;
    }
    .top.top2 {
      width: 21px;
      height: 20px;
      text-align: center;
      background: url("~@/assets/lkd/top2.png");
      color: #494949;
    }
    .top.top3 {
      width: 21px;
      height: 20px;
      text-align: center;
      background: url("~@/assets/lkd/top3.png");
      color: #cf6d3d;
    }
    .sku-name {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .count {
      font-size: 14px;
      font-weight: 400;
      color: #737589;
      line-height: 20px;
      text-align: right;
    }
  }
  .collect {
    width: 154px;
    height: 230px;
    padding-top: 47px;
    padding-left: 38px;
    background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
      linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
      linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
      linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    .count {
      height: 33px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #072074;
      line-height: 33px;
      &.count2 {
        margin-top: 20px;
      }
    }
    .name {
      height: 17px;
      margin-top: 6px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000412;
      line-height: 17px;
    }
  }
}
</style>
